@import './introjs.css';

.introjs-disableInteraction {
  border-radius: 10px;
}

.h3-intro-bubble {
  box-shadow: 0px 0px 10px 0px rgba(27, 43, 76, 0.27);
  border-radius: 3px;
  width: 418px;
  max-width: 900px;

  // width: 285px;
  // height: 130px;
  // padding: 24px 24px 0 24px;
  .bubble-box {
    .bubble-content {
      font-size: 16px;
      font-weight: 400;
      color: rgba(0, 0, 0, .65);
      line-height: 20px;
      min-height: 40px;
      margin: 0;
      overflow: hidden;
    }
  }

  .introjs-tooltipbuttons {
    margin-top: 16px;
    height: 34px;
    line-height: 34px;
  }

  .h3-intro-button {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    height: 34px;
    font-weight: 400;
    line-height: 34px;
    font-size: 14px;

    &.introjs-skipbutton {
      width: 62px;
      color: #8893A7;
    }

    &.introjs-donebutton.introjs-skipbutton,
    &.introjs-nextbutton {
      width: 74px;
      touch-action: manipulation;
      background-image: none;
      border: 1px solid transparent;
      white-space: nowrap;
      border-radius: 4px;
      user-select: none;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      position: relative;
      color: #fff;
      background-color: @primary-color;
      border-color: @primary-color;

      &:hover {
        color: #fff;
        opacity: 0.85;
        // background-color: @primary-color;
        // border-color: @primary-color;
      }
    }

    &.introjs-skipbutton,
    &.introjs-prevbutton {
      margin-right: 8px;
      width: 74px;
      touch-action: manipulation;
      background-image: none;
      border: 1px solid transparent;
      white-space: nowrap;
      border-radius: 4px;
      user-select: none;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      position: relative;
      color: rgba(0, 0, 0, .65);
      background-color: #fff;
      border-color: #d9d9d9;
      ;

      &:hover {
        color: @primary-color;
        border-color: @primary-color;
      }
    }

  }

  .stepNumber {
    color: #8893A7;
    float: left;
  }
}